<template>
  <div>
    <div class="search_box">
      <el-form
        :inline="true"
        ref="ruleFormRef"
        :model="formData"
        @submit.prevent
      >
        <el-form-item>
          <el-input
            v-model="formData.keyword"
            placeholder="请输入剧集ID或标题"
            clearable
            @clear="getList(1)"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="getList(1)"
            v-auth="'api:agent:distributor:search'"
            >查 询</el-button
          >
          <!-- <span style="margin: 0 12px; color: #666">|</span> -->

          <!-- <el-button type="primary" @click="addMovie">
            <el-icon style="margin-right: 5px">
              <Plus />
            </el-icon>
            新 增
          </el-button> -->
        </el-form-item>
      </el-form>
    </div>

    <div class="table_box_wrapper">
      <custom-table
        :loading="loading"
        :columns="columns"
        :tableData="tableData"
        :pageObj="pageObj"
        @sizechange="sizechange"
        @currentChange="currentChange"
        :isCustomHead="true"
        class="table_box"
      >
        <template #promotionStartTime="{ scope }">
          <div>
            <span v-if="activeTime(scope.row?.promotionStartTime)" class="red">
              {{ scope.row.promotionStartTime }}
            </span>
            <el-tag type="success" v-else>已开投</el-tag>
          </div>
        </template>

        <template #name="{ scope }">
          <div class="movie_box">
            <el-image
              v-if="scope.row?.cover"
              class="img"
              :src="`https://theater-static-1320245876.cos.ap-guangzhou.myqcloud.com/static/cover/${scope.row?.cover}?${randN}`"
            />
            <el-image class="img" v-else>
              <template #error>
                <div class="image-slot">
                  <el-icon><PictureFilled /></el-icon>
                </div>
              </template>
            </el-image>
            <div class="overflowTwo name">{{ scope.row.name }}</div>
          </div>
        </template>
        <template #desc="{ scope }">
          <el-tooltip
            effect="dark"
            :content="scope.row.desc"
            placement="top"
            v-if="scope.row?.desc && scope.row?.desc.length > 17"
          >
            <div class="overflowTwo name">{{ scope.row.desc }}</div>
          </el-tooltip>
          <div class="overflowTwo name" v-else>{{ scope.row.desc }}</div>
        </template>
        <template #updateEpisodeNo="{ scope }">
          <span
            >{{ scope.row.updateEpisodeNo }} / {{ scope.row.episodeNum }}</span
          >
        </template>
        <template #showStatus="{ scope }">
          <el-tag type="success" v-if="scope.row.showStatus == 1">展示</el-tag>
          <el-tag type="danger" v-else>
            {{ `${scope.row.showStatus == 2 ? "不展示可播放" : "不展示"}` }}
          </el-tag>
        </template>
        <template #operator="{ scope }">
          <span
            v-auth="'api:agent:distributor:payset'"
            class="operationClick isBlock"
            @click.stop="handleSet(scope.row)"
            >收费设置</span
          >
          <span
            v-auth="'api:agent:distributor:online'"
            class="operationClick isBlock"
            @click.stop="onlinePlay(scope.row)"
            >在线播放</span
          >
          <!-- <span class="operationClick isBlock" @click.stop="handleEdit(scope.row)">信息编辑</span>
          <span class="operationClick isBlock" @click.stop="handleDelete(scope.row)">删除</span> -->
        </template>
      </custom-table>
    </div>

    <!-- 收费设置 -->
    <paySetting ref="paySettingRef" @success="getList(1)" />

    <!-- 在线播放 -->
    <onLinePlay ref="onlinePlayRef" />

    <!-- 新增编辑信息 -->
    <infoDialog ref="infoRef" />
  </div>
</template>

<script setup lang="ts">
import customTable from "@/components/CustomTable/index.vue";
import paySetting from "./components/paySetting.vue";
import onLinePlay from "./components/onlinePlay.vue";
import infoDialog from "./components/informatDialog.vue";

import { movieList, deleteMovie } from "@/api/episodeList/index";
import { defineComponent, reactive, ref } from "vue";
import { useUserStore } from "@/store/modules/user";
import { PictureFilled } from "@element-plus/icons-vue";
import moment from "moment";

const { userAppid } = useUserStore().user;
const randN = Math.floor(Math.random() * 100000); // 生成随机数，保证每个图片不走浏览器缓存
const loading = ref<boolean>(false);
const formData = reactive({
  pageNo: 1,
  pageSize: 10,
  keyword: "",
  // column: "",
  // asc: "",
});
const tableData = ref<Array<any>>([]);

interface modelPage {
  pageNo: number;
  pageSize: number;
  total: number;
}
const pageObj = reactive<modelPage>({
  pageNo: 1,
  pageSize: 10,
  total: 0,
});

const columns = reactive([
  { label: "ID", prop: "id", minWidth: 60 },
  { label: "剧集", prop: "name", slotName: "name", minWidth: 200 },
  { label: "备注", prop: "desc", slotName: "desc", minWidth: 160 },
  {
    label: "开投时间",
    prop: "promotionStartTime",
    slotName: "promotionStartTime",
    minWidth: 160,
  },
  {
    label: "已发布/总集数",
    prop: "updateEpisodeNo",
    slotName: "updateEpisodeNo",
    minWidth: 115,
  },
  // { label: "收费卡点", prop: "chargeEpisodeNo", minWidth: 100 },
  { label: "单价(金币)", prop: "unblockCoinAmount", minWidth: 100 },
  { label: "排序", prop: "sort", minWidth: 60 },
  { label: "标签", prop: "category", minWidth: 100 },
  {
    label: "小程序列表展示",
    prop: "showStatus",
    slotName: "showStatus",
    minWidth: 125,
  },
  { label: "充值模板", prop: "payTplName", minWidth: 130 },
  {
    label: "操作",
    prop: "operator",
    slotName: "operator",
    width: 90,
    fixed: "right",
  },
]);

const getList = (val = 0) => {
  // if (!val) {
  //   formData.pageNo = pageObj.pageNo;
  //   formData.pageSize = pageObj.pageSize;
  // } else {
  //   formData.pageNo = pageObj.pageNo = val === 1 ? val : 1;
  //   formData.pageSize = pageObj.pageSize = val === 1 ? 10 : pageObj.pageSize;
  // }
  formData.pageNo = pageObj.pageNo;
  formData.pageSize = pageObj.pageSize;

  loading.value = true;
  movieList(formData)
    .then((res: Record<string, any>) => {
      tableData.value = res.data.map((item: Record<string, any>) => {
        item.premiereTime = moment(item.premiereTime + "Z").format(
          "YYYY-MM-DD HH:mm:ss"
        );
        item.promotionStartTime = moment(item.promotionStartTime + "Z").format(
          "YYYY-MM-DD HH:mm:ss"
        );
        return item;
      });
      pageObj.total = Number(res?.total);
      loading.value = true;
    })
    .finally(() => {
      loading.value = false;
    });
};

// 收费设置
const paySettingRef = ref();
const handleSet = (val: Record<string, any>) => {
  paySettingRef.value.showDialog(val);
};

// 在线播放
const onlinePlayRef = ref();
const onlinePlay = (val: Record<string, any>) => {
  onlinePlayRef.value.showDialog(val);
};

// 新增
const infoRef = ref();
const addMovie = () => {
  infoRef.value.showDialog();
};
// 编辑
const handleEdit = (val: Record<string, any>) => {
  infoRef.value.showDialog(val);
};

// 删除
const handleDelete = (val: Record<string, any>) => {
  ElMessageBox.confirm("确认删除这条数据吗?", "提醒", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteMovie({ id: val.id }).then((res: Record<string, any>) => {
        if (res.code) {
          ElMessage.success("删除成功");
          getList(1);
        }
      });
    })
    .catch(() => {});
};

const currentChange = (val: number) => {
  pageObj.pageNo = val;
  getList();
};

const sizechange = (val: number) => {
  pageObj.pageSize = val;
  getList(2);
};

const activeTime = (Time: string) => {
  let now = Date.now();
  let openTime = moment(Time).valueOf();
  return openTime > now ? true : false;
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.table_box_wrapper {
  padding-top: 42px;
  margin-top: 15px;
  background-color: #fff;
}

.table_box {
  padding: 10px;
  border-radius: 4px;

  .movie_box {
    display: flex;
    align-items: center;

    .name {
      display: inline-block;
      width: 100px;
    }

    .img {
      width: 80px;
      margin-right: 8px;
      object-fit: contain;

      :deep(.el-image__error) {
        height: 60px;
      }

      .image-slot {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 60px;
        font-size: 30px;
        color: var(--el-text-color-secondary);
        background: var(--el-fill-color-light);

        .el-icon {
          font-size: 22px;
        }
      }
    }

    span {
      flex: 1;
    }
  }
}
</style>
